<template>
  <div class="login-test">
    <HeaderComponent 
      :isLoggedIn="userStore.isLoggedIn"
      :userInfo="userStore.userInfo"
      :showUserPanel="showUserPanel"
      @open-login="openLoginModal"
      @toggle-user-panel="toggleUserPanel"
      @logout="logout"
    />
    
    <div class="test-container">
      <h1>登录功能测试页面</h1>
      
      <div class="test-info">
        <h2>测试说明</h2>
        <p>1. 点击右上角的"登录"按钮打开登录弹窗</p>
        <p>2. 选择"密码登录"选项卡</p>
        <p>3. 输入后端数据库中存在的用户账号和密码</p>
        <p>4. 点击登录按钮，系统会调用后端API: <code>http://localhost:8121/api/user/login</code></p>
        <p>5. 登录成功后会显示用户信息</p>
      </div>
      
      <div class="current-status">
        <h2>当前状态</h2>
        <div class="status-item">
          <strong>登录状态:</strong> 
          <span :class="userStore.isLoggedIn ? 'status-success' : 'status-error'">
            {{ userStore.isLoggedIn ? '已登录' : '未登录' }}
          </span>
        </div>
        <div v-if="userStore.isLoggedIn" class="status-item">
          <strong>用户名:</strong> {{ userStore.userInfo.nickname }}
        </div>
        <div v-if="userStore.isLoggedIn" class="status-item">
          <strong>用户ID:</strong> {{ userStore.userInfo.userId }}
        </div>
      </div>
      
      <div class="api-info">
        <h2>API信息</h2>
        <div class="api-item">
          <strong>登录接口:</strong> <code>POST http://localhost:8121/api/user/login</code>
        </div>
        <div class="api-item">
          <strong>请求参数:</strong>
          <pre>{
  "userAccount": "用户账号",
  "userPassword": "用户密码"
}</pre>
        </div>
        <div class="api-item">
          <strong>成功响应:</strong>
          <pre>{
  "code": 0,
  "data": {
    "id": "用户ID",
    "userAccount": "用户账号",
    "userName": "用户名",
    "userAvatar": "头像URL"
  },
  "message": "ok"
}</pre>
        </div>
      </div>
    </div>
    
    <!-- 登录模态框 -->
    <LoginModal 
      :show="showLoginModal" 
      @close="closeLoginModal"
      @login-success="handleLoginSuccess"
    />
  </div>
</template>

<script>
import HeaderComponent from '@/components/HeaderComponent.vue'
import LoginModal from '@/components/LoginModal.vue'
import { useUserStore } from '@/stores/user.js'

export default {
  name: 'LoginTest',
  components: {
    HeaderComponent,
    LoginModal
  },
  setup() {
    const userStore = useUserStore()
    return {
      userStore
    }
  },
  data() {
    return {
      showLoginModal: false,
      showUserPanel: false
    }
  },
  mounted() {
    this.userStore.initUserState()
  },
  methods: {
    openLoginModal() {
      this.showLoginModal = true
    },
    closeLoginModal() {
      this.showLoginModal = false
    },
    async handleLoginSuccess(info) {
      // 登录成功后，用户信息已经在LoginModal中通过fetchUserInfo获取了
      this.showLoginModal = false
    },
    toggleUserPanel() {
      this.showUserPanel = !this.showUserPanel
    },
    logout() {
      this.userStore.logout()
      this.showUserPanel = false
    }
  }
}
</script>

<style scoped>
.login-test {
  min-height: 100vh;
  background-color: #f4f5f5;
}

.test-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  color: #1d2129;
  margin-bottom: 30px;
}

h2 {
  color: #1d2129;
  margin-bottom: 15px;
  border-bottom: 2px solid #1e80ff;
  padding-bottom: 5px;
}

.test-info,
.current-status,
.api-info {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.test-info p {
  margin: 10px 0;
  line-height: 1.6;
}

.status-item,
.api-item {
  margin: 10px 0;
}

.status-success {
  color: #52c41a;
  font-weight: bold;
}

.status-error {
  color: #ff4d4f;
  font-weight: bold;
}

code {
  background-color: #f6f8fa;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  color: #1e80ff;
}

pre {
  background-color: #f6f8fa;
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid #e1e4e8;
}
</style>